<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <script src="jquery-ui-1.12.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css"/>

</head>
<body>
    <span id="span">0</span>
    <div id="slider"></div>

    <script>
            var valueSpan,slider;
            $(document).ready(function(){
                /*$("#slider").slider();*/
                slider=$("#slider");
                valueSpan=$("#span");
                /*拖动的时候变动数值*/
                /*slider.slider({
                    change:function(event,ui){
                        valueSpan.text(slider.slider("option","value"))
                    }
                })*/
                slider.slider({
                    slide:function(event,ui){
                        valueSpan.text(slider.slider("option","value"));
                    }
                });
            });


    </script>
</body>
</html>

